<template>
  <a-modal
    :footer="null"
    :title="title"
    width="90%"
    :visible="visible"
    :confirmLoading="loading"
    @cancel="()=>{this.visible=false}"
  >
  <div id="print-html" ref="PrintView">
    <table style="height: 500px; width: 95%; margin-left: auto; margin-right: auto;border-collapse: collapse;" border="1px" cellpadding="0" cellspacing="0" bordercolor ="#000000"  bordercolordark ="#000000">
      <caption style="padding: 13px 0; font-size: 22px; font-weight: inherit;">请假条</caption>
      <tbody>
      <tr style=" text-align: center;">
        <th width="10%" style="text-align: center; vertical-align: middle;word-wrap:break-word;">申请人</th>
        <td width="15%" style="text-align: center; vertical-align: middle;"></td>
        <th width="10%" style="text-align: center; vertical-align: middle;">所属部门</th>
        <td width="15%" style="text-align: center; vertical-align: middle;"></td>
        <th width="10%" style="text-align: center; vertical-align: middle;">请假时长</th>
        <td width="15%" style="text-align: center; vertical-align: middle;"></td>
        <th width="10%" style="text-align: center; vertical-align: middle;">请假类型</th>
        <td width="15%" style="text-align: center; vertical-align: middle;"></td>
      </tr>
      <tr style="">
        <th style="text-align: center; vertical-align: middle;">请假事由</th>
        <td style="text-align: center; vertical-align: middle;word-wrap:break-word;" colspan="7"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">申请时间</th>
        <td style="text-align: center; vertical-align: middle;"></td>
        <th style="text-align: center; vertical-align: middle;">开始时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
        <th style="text-align: center; vertical-align: middle;">结束时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">申请时间</th>
        <td style="text-align: center; vertical-align: middle;"></td>
        <th style="text-align: center; vertical-align: middle;">开始时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
        <th style="text-align: center; vertical-align: middle;">结束时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">申请时间</th>
        <td style="text-align: center; vertical-align: middle;"></td>
        <th style="text-align: center; vertical-align: middle;">开始时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
        <th style="text-align: center; vertical-align: middle;">结束时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">申请时间</th>
        <td style="text-align: center; vertical-align: middle;"></td>
        <th style="text-align: center; vertical-align: middle;">开始时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
        <th style="text-align: center; vertical-align: middle;">结束时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">申请时间</th>
        <td style="text-align: center; vertical-align: middle;"></td>
        <th style="text-align: center; vertical-align: middle;">开始时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
        <th style="text-align: center; vertical-align: middle;">结束时间</th>
        <td style="text-align: center; vertical-align: middle;" colspan="2"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">审批</th>
        <td style="text-align: center; vertical-align: middle;word-wrap:break-word;" colspan="3"></td>
        <th style="text-align: center; vertical-align: middle;">抄送</th>
        <td style="text-align: center; vertical-align: middle;word-wrap:break-word;" colspan="3"></td>
      </tr>
      <tr >
        <th style="text-align: center; vertical-align: middle;">备注</th>
        <td style="text-align: center; vertical-align: middle;word-wrap:break-word;" colspan="7"></td>
      </tr>
      </tbody>
    </table>
    </div>
  <div align="right">
    <a-button type="primary" align="right" style="margin-right: 10px;">打印</a-button>
    <a-button type="default" align="right" @click= "() =>{this.visible=false}" style="margin-right: 10px;">取消</a-button>
  </div>
  </a-modal>
</template>

<script>
export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      title: ''
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        //this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()
      if (id) {
        this.loading = true
        this.$http.post('/Base_Manage/Sys_Device/GetTheData', { id: id }).then(resJson => {
          this.loading = false
            debugger
            console.log(resJson.Data);
          this.entity = resJson.Data
        })
      }
    },
  }
}
</script>
